<template>
  <div class="common_block_div">

    <div class=" margin_t20" v-loading="loading">
      <el-form ref="form" :rules="rules" :model="form" label-width="120px">
          <el-form-item label="标题：" prop="menu_name">
              <el-input v-model="form.menu_name" maxlength="20" placeholder="请输入标题" style="width:300px" />
          </el-form-item>
          <el-form-item label="图标:" prop="menu_icon">
            <SigleUpload :limit="1" :img="form.menu_icon || ''" accept="image/*" class="black" type="picture-card" formkey="menu_icon" form="form" @PicturePreview="PicturePreview" @handleUploadSuccess="handleUploadSuccess" @handleUploadRemove="handleUploadRemove"></SigleUpload>
          </el-form-item>
          <el-form-item label="类型：" prop="menu_type">
              <el-select v-model="form.menu_type" placeholder="请选择" style="width:300px" filterable>
                <el-option :label="item.title" v-for="(item,index) in type_list" :key="index" :value="item.id"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="父级：" prop="parent_id">
              <el-cascader style="width:300px" v-model="form.parent_id" :options="list"
                  :props="{ expandTrigger: 'hover',checkStrictly: true,emitPath:false,value:'id',label:'menu_name',children:'children'}"
                  clearable></el-cascader>
          </el-form-item>
          <el-form-item label="地址：" prop="menu_url">
              <el-input v-model="form.menu_url" maxlength="50" placeholder="请输入地址" style="width:300px" />
          </el-form-item>
          <el-form-item label="排序：">
              <el-input-number v-model="form.sort_order" controls-position="right" :min="0" />
          </el-form-item>
          <!-- <el-form-item label="状态：">
              <el-switch
                  v-model="form.status"
                  :active-value="1"
                  :inactive-value="0">
                </el-switch>
          </el-form-item> -->
      </el-form>
      <div class="bottom_btn pad_t10" style="padding-left: 120px;">
          <el-button type="primary" @click="submitForm('form')" :loading="is_ajax">提交</el-button>
          <el-button @click="$router.go(-1)">取消</el-button>
      </div>
    </div>

    <!-- 上传图片预览 -->
    <el-dialog  :close-on-click-modal="false" append-to-body @closed="uploadImageUrl=''" width="600px" :visible.sync="uploadImgVisible">
      <img style="width: 100%; background: rgba(0,0,0,0.1);" :src="uploadImageUrl" alt="">
    </el-dialog>

  </div>
</template>

<script>
// 上传组件
import SigleUpload from "@/components/UploadImage/sigleUpload";
export default {
  name: 'addmenu',
  components: {SigleUpload},
  data () {
    return {
      id: '',
      is_ajax: false,
      form: {
          menu_name:'',
          parent_id:0,
          menu_type:'',
          menu_url:"",
          menu_icon:"",
          sort_order: 0,
          is_visible:1,
          status:1
      },
      rules: {
        menu_name: [
          { required: true, message: "标题不能为空",trigger: "blur"}
        ],
        menu_type: [
          { required: true, message: "类型不能为空",trigger: "blur"}
        ],
        menu_url: [
          { required: true, message: "地址不能为空",trigger: "blur"}
        ]
      },
      list: [],
      type_list:[
          {title:'目录',id:1},
          {title:'菜单',id:2},
          {title:'按钮',id:3}
      ],
      // 上传图片
      uploadImageUrl: '',
      uploadImgVisible: false,
      loading:false
    }
  },
  created() {
   this.id=this.$route.query.id || '';
   if(this.id){
      this.loading=true
      this.get_data()
   }
   this.getOptions()
  },
  methods:{
    // 上传图片--s
    PicturePreview(file) {
      this.uploadImageUrl = file.url;
      this.uploadImgVisible = true;
    },
    handleUploadSuccess(res){
      this[res.form][res.key]=res.url
    },
    handleUploadRemove(res){
      this[res.form][res.key]=''
    },
    // 表单重置
    reset(pid) {
      this.form = {
        menu_name:'',
        parent_id:pid || 0,
        menu_type:'',
        menu_url:"",
        menu_icon:"",
        sort_order: 0,
        is_visible:1,
        status:1
      };
      if(this.$refs['form']){
        this.$refs['form'].clearValidate();
      }
    },
    /** 提交按钮 */
    submitForm: function(form) {
      this.$refs[form].validate((valid)  => {
        if (valid) {
          this.is_ajax=true;
          if(form=='form'){
            this.axios.post("/manage/admin.Menu/save", this.form).then((res) => {
                if (res) {
                    this.$message.success('编辑成功');
                    // this.reset();
                    // this.$router.go(-1)
                } else {
                    this.$message.error(res.message);
                }
                this.is_ajax=false;
            }).catch((err) => {
                console.log(err);
                this.is_ajax=false;
            });
          }
        }
      });
    },
    get_data(){
        this.axios.get("/manage/admin.Menu/read", {params:{id:this.id}}).then((res) => {
            if (res) {
                this.form=res.data;
                this.loading=false
            } else {
                this.$message.error(res.message);
            }
        }).catch((err) => {
            console.log(err);
        });
    },
    getOptions() {
        this.axios.get("/manage/admin.Menu/index",{}).then((res) => {
            if (res) {
                this.list = res.message || [];
            }
        }).catch((err) => {
            console.log(err);
        });
    },

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .title{line-height: 44px; font-size: 20px;}
</style>
